//加载公共样式
require('../../assets/css/public.less')

//加载自己的样式
require('./sportData.less')

// 引入表格样式
const echarts = require('echarts')
// 请求axios工具
const request = require('../../lib/request/request')

// 引入
require('../../assets/public/fonts/iconfont.css')

window.onload = () => {
    request.get('/api/exercise').then(res => {
        let { errno, data } = res.data
        let suo = 0;
        if (errno === 0) {
            console.log('res.data :>> ', res.data);
            let qwe = res.data.data
            // 渲染
            duration.textContent = qwe.sum7Duration
            calorie.textContent = qwe.sum7Calorie

            let time = res.data.data.days
            num11.textContent = time[suo].sumDuration
            num22.textContent = time[suo].count
            num33.textContent = time[suo].count
            /*           let numm = time.map(v => {
          
                          b = v.sumDuration
                          return b
                      })*/
            let num1 = time.map(v => {
                // console.log(v);
                // console.log(v.date);
                // console.log(date.slice(5));
                xDate = v.date.slice(5)
                return xDate
            })
            // console.log(num, num1);

            // console.log(time);

            let arr = ['count', 'sumCalorie', 'sumDuration', 'sumMeter']
            let series = arr.map(name => ({
                name: name,
                type: 'bar',
                data: data.days.map(v => v[name]),
            }))
            renderBar(num1, series)
        }
    })
    //渲染柱状图
    function renderBar(xData, series) {
        //1 创建实例对象
        const myChart = echarts.init(document.querySelector('#bar'))

        //2 写上配置项
        let option = {
            //标题组件
            title: {
                text: '近7天运动时长',
                left: 15,
                top: 15,
            },
            //提示框组件
            tooltip: {},
            //图例组件
            xAxis: {
                data: xData,
            },
            yAxis: {},
            //核心数据
            series: series
        }

        //3 载入配置
        myChart.setOption(option)
    }



    //渲染饼图
    function renderPie() {
        //1 创建实例
        const myChart = echarts.init(document.querySelector('#pie'))

        //2 配置项
        let option = {
            title: {
                text: '运动分类',
                left: 15,
                top: 15,
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data:
                        [
                            {
                                value: 40,
                                name: '训练',
                                label: {
                                    position: 'inside',
                                    color: '#fff',
                                    formatter: '{c}%',
                                },
                                itemStyle: {
                                    color: '#58bb92',
                                },
                            },
                            {
                                value: 25,
                                name: '跑步',
                                label: {
                                    position: 'inside',
                                    color: '#fff',
                                    formatter: '{c}%',
                                },
                                itemStyle: {
                                    color: '#736171',
                                },
                            },
                            {
                                value: 35,
                                name: '骑行',
                                label: {
                                    position: 'inside',
                                    color: '#fff',
                                    formatter: '{c}%',
                                },
                                itemStyle: {
                                    color: '#ee5c43',
                                },
                            },
                        ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                },
            ],
        }

        //3 导入配置
        myChart.setOption(option)
    }

    renderPie()
}